<template>
	<view class="container">
		<!-- 顶部tab -->
		<view class="tab-bar">
			<view :class="selectTab === 0 ? 'select' : ''" @click="handleTabChange({ detail: { current: 0 } })">全部
			</view>
			<view :class="selectTab === 1 ? 'select' : ''" @click="handleTabChange({ detail: { current: 1 } })">招募中
			</view>
			<view :class="selectTab === 2 ? 'select' : ''" @click="handleTabChange({ detail: { current: 2 } })">待结算
			</view>
			<view :class="selectTab === 3 ? 'select' : ''" @click="handleTabChange({ detail: { current: 3 } })">已驳回
			</view>
		</view>
		<view class="hg-30"></view>

		<!-- 主体内容 -->
		<view class="list">
			<!-- 工作信息 -->
			<view class="job-info" v-for="item in jobList" :key="item.id" @click="handleOpenPage(item.id, item.status)">
				<view>
					<text>{{item.name}}</text>
					<!-- 状态栏 -->
					<view class="status"
						:class="item.status === 1 ? 'waitPayGold' : item.status === 3 ? 'putOn' : item.status === 4 ? 'putDown' : item.status === 5 ? 'finish' : item.status === 6 ? 'cancel' : item.status === 7 ? 'waitPay' : item.checkStatus === 2 ? 'reject' : 'examine' ">
						{{ (item.status === 1 && item.serverFlag) ? '未纳服务费' : item.status === 1 ? '未纳诚意金' : item.status === 3 ? '招募中' : item.status === 4 ? '工作中' : item.status === 5 ? '已完成' : item.status === 6 ? '已取消' : item.status === 7 ? '待结算'  : item.checkStatus === 2 ? '已驳回' : '审核中' }}
					</view>
				</view>

				<view>
					<image src="http://images.linglinggong.net/icon1/14.png" mode="aspectFill"></image>
					<text>{{item.address}}</text>
				</view>

				<view class="money">
					{{ item.reward }}{{ item.taskType==0 ? '元/小时' : item.taskType==1 ? '元/件' : item.taskType==2 ? '元/天' : ''}}
				</view>
				<view style="display: none;" class="money" v-if="item.taskType==1">{{ item.floorsAmount }}元/小时</view>

				<view class="last-line" v-if="!(item.status == 2 && item.checkStatus == 1)">
					<!-- 文字说明 -->
					<view class="status-info">
						{{ item.status == 3 || item.status == 4 ? ('有'+ item.applyNum + '个雇员接单&#12288;&#12288;&#12288;') :''}}
						{{ item.checkStatus ==2 ||  item.remark !="审核通过" && item.remark !="" ? ('原因: '+ item.remark) :''}}
					</view>
					<!-- 按钮 -->
					<view class="buttons">
						<!-- {{item.status}} -->
						<!-- <view @click.stop="handleOpenModal(0, item.status, item.id)" class="button" v-if="item.status !=7 && item.status !=4">
							{{ (item.status == 6 || item.status == 5 ) ? '删除' : '取消' }}
						</view> -->
						<view @click.stop="handleOpenModal(0, item.status, item.id)" class="button"
							v-if="item.status !=7">
							{{ (item.status == 6 || item.status == 5 || item.status ==4 ) ? '删除' : '取消' }}
						</view>
						<view @click.stop="handleOpenModal(1, item.status, item.id)"
							v-if="(item.status==1 || item.status==5 || item.checkStatus==2 ) && (item.status != 6)"
							class="button" :style="{background: '#F39B19', border: '#F39B19'}">
							{{item.status == 1 ? '支付' : item.checkStatus == 2 ? '修改' : item.status==5 ? '重新发单' : '重新发单'}}
						</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
		<!-- 弹窗 -->
		<modal :titleColor="titleColor" :contentColor="contentColor" :isShowModal="isShowModal"
			:modalStytle="modalStytle" :unitPrice="unitPrice" :workTime="workTime" :workPrice="workPrice"
			:button="button" :status="clickStatus" :clickJobType="clickJobType" @handleLeft="handleLeft"
			@handleRight="handleRight" :titleContect="titleContect" :middleContext="middleContext"
			:leftContext="leftContext" :rightContext="rightContext"></modal>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import modal from '@/components/modal/modal.vue'
	export default {
		components: {
			uniLoadMore,
			modal,
		},
		data() {
			return {
				titleColor: '#402110',
				contentColor: '#402110',
				modalStytle: 3, //0-left-text,1-two-line,2-hasInput, 3-middle-context
				hasFlag: true, //是否加载完成
				timer: null, //定时器
				selectTab: 0, // 当前选中的tabbar索引 index
				button: 1, //按钮类型
				taskId: '', //点中的工作taskId
				clickStatus: 0, //工作状态
				clickJobType: 2, //工作类型0计时工，1：计天工，2计件工
				isShowModal: false, //是否显示弹框
				titleContect: '', //弹框标题
				middleContext: '', //弹框中间的内容
				unitPrice: 0, //计件单价
				workTime: '0', //计时工作时间
				workPrice: 0, //工作单价
				leftContext: '取消', //弹框按钮左边的内容
				rightContext: '确认', //弹框按钮右边的内容
				jobList: [],
				requestObj: {
					pageNum: 0,
					pageSize: 10,
					userId: '',
					status: '',
					userId: '',
					isAsc: 'desc',
					orderByColumn: 'createTime',
				},
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				imgPath: '', //图片路径
				street: {}, //街道
				handleIsStop: true, // 是否允许切换
			}
		},
		methods: {
			//打开弹框
			handleOpenModal(button, status, taskId) {
				this.taskId = taskId
				// console.log('button',button, 'status',status,'id', taskId)
				this.button = button
				this.clickStatus = status
				if (button === 0 && (status == 6 || status == 5 || status == 4)) {
					this.modalStytle = 3
					this.titleContect = '删除零工'
					this.middleContext = ' 是否删除零工？'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
					this.titleColor = '#402110'
					this.contentColor = '#402110'
				} else if (button === 0 && status != 6 && status != 5) {
					this.modalStytle = 3
					this.titleContect = '取消零工'
					this.middleContext = '取消零工会扣除相应诚信值，诚信值过低将导致无法发布任务，请谨慎操作!'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
					this.titleColor = 'red'
					this.contentColor = 'red'

				} else if (button == 1 && status == 1) {
					// 支付
					uni.navigateTo({
						url: '/pages/app-employer/send-job-pay/send-job-pay?taskId=' + this.taskId
					})
				} else if (button == 1 && status == 5) {
					// 重新发单
					// 需要选择今天工作人员继续参与
					// #ifdef MP-WEIXIN || MP-TOUTIAO
					uni.navigateTo({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=new'
					})
					// #endif
					// #ifdef MP-ALIPAY
					uni.reLaunch({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=new'
					})
					// #endif
				} else if (this.button == 1 && this.clickStatus == 2) {
					// 驳回修改
					// 人数不能变
					// #ifdef MP-WEIXIN || MP-TOUTIAO
					uni.navigateTo({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=old'
					})
					// #endif
					// #ifdef MP-ALIPAY
					uni.reLaunch({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=old'
					})
					// #endif
				}
			},

			//弹框左键
			handleLeft() {
				this.isShowModal = false
			},

			//弹框右键
			async handleRight() {
				this.isShowModal = false
				// 删除
				if (this.button == 0 && (this.clickStatus == 6 || this.clickStatus == 5 || this.clickStatus == 4)) {
					let res = await this.$fetch(this.$api.del_task, {
						taskId: this.taskId
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					// 取消
				} else if (this.button == 0 && this.clickStatus != 6 && this.clickStatus != 5) {
					let res = await this.$fetch(this.$api.cancel_task, {
						taskId: this.taskId
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.refresh()
			},

			// 更改类目
			handleTabChange({
				detail: {
					current
				}
			}) {
				if (this.selectTab == current) return
				this.selectTab = current
				this.requestObj.status = this.selectTab == 0 ? '' : this.selectTab == 1 ? 3 : this.selectTab == 3 ? 8 : ''
				this.requestObj.statusIn = this.selectTab == 2 ? '4,7' : ''
				this.refresh()
			},

			//打开订单详情页
			handleOpenPage(id, taskStatus) {
				uni.navigateTo({
					url: '/pages/app-employer/boss-order-detail/boss-order-detail?id=' + id + '&taskStatus=' +
						taskStatus
				})
			},

			//获取我的零工 
			async task_list() {
				console.log('获取我的零工', this.hasFlag, this.handleIsStop)
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.requestObj.pageNum

				if (!this.handleIsStop) return uni.showToast({
					title: '你点击得太快啦~',
					icon: 'none'
				}) // 说明上一条请求结果未返回
				this.handleIsStop = false

				this.requestObj.userId = this.userInfo.userId
				// console.log('获取我的零工 参数this.requestObj',this.requestObj)
				let res = await this.$fetch(this.$api.task_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log('获取我发布的零工 res.rows[0]', res.rows[0])
				res.rows.forEach(item => {
					item.reward = item.reward.divide(100)
					item.floorsAmount = item.floorsAmount ? item.floorsAmount.divide(100) : 0
					// console.log('获取我的零工 item',item)
				})

				uni.stopPullDownRefresh()
				this.handleIsStop = true

				this.jobList = [...this.jobList, ...res.rows]
				// console.log('666', this.jobList)
				this.hasFlag = this.requestObj.pageSize * this.requestObj.pageNum < res.total
			},
			// 刷新
			refresh() {
				this.jobList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 10
				this.task_list()
			},
		},

		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.imgPath = uni.getStorageSync('imgPath')
			this.street = uni.getStorageSync('street')
			// uni.startPullDownRefresh()
			this.refresh()

		},
		onShow() {
			console.log('我发布的零工')
		},
		onReachBottom() {
			this.task_list()
		},

		onPullDownRefresh() {
			//监听用户下拉动作，一般用于下拉刷新
			this.refresh()
		},
	}
</script>

<style lang="less" scoped>
	.container {
		overflow: hidden;

		&>.tab-bar {
			z-index: 1;
			position: fixed;
			display: flex;
			height: 90rpx;
			background-color: #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03);

			&>view {
				// border: 1px solid #007AFF;
				display: flex;
				width: 25vw;
				height: 90rpx;
				// position: relative;
				justify-content: center;
				align-items: center;
				color: rgba(64, 33, 16, 0.50);
			}

			&>.select {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				font-weight: bold;
				color: #F39B19;

				&::before {
					content: "";
					position: absolute;
					left: 69rpx;
					bottom: 0;
					width: 50rpx;
					height: 4rpx;
					background: #F39B19;
					border-radius: 1px;
				}
			}
		}

		&>.list {
			margin-top: 100rpx;

			.job-info {
				position: relative;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				padding: 30rpx;

				&>view {
					display: flex;
				}

				&>view:nth-child(1) {
					justify-content: space-between;
					margin-bottom: 20rpx;

					&>text {
						height: 48rpx;
						font-weight: bold;
						font-size: 17px;
						letter-spacing: 0;
					}

					&>.status {
						font-size: 12px;

						&.waitPay,
						&.examine,
						&.putOn,
						&.inProgress {
							color: #F39B19;
						}

						&.cancel {
							color: rgba(64, 33, 16, 0.5);
						}

						&.finish,
						&.comment {
							color: #4E9800;
						}
					}
				}

				&>view:nth-child(2) {
					// border: 1px solid #000000;
					// height: 34rpx;
					display: flex;
					margin-bottom: 30rpx;
					font-size: 12px;
					color: rgba(64, 33, 16, 0.70);
					letter-spacing: 0;

					&>image {
						align-self: center;
						width: 26rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				&>.money {
					line-height: 48rpx;
					font-weight: bold;
					font-size: 17px;
					color: #FF650C;
					letter-spacing: 0;
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
				}

				&>.last-line {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>.status-info {
						color: rgba(64, 33, 16, 0.50);
					}

					&>.buttons {
						// border: 1px solid #000000;
						display: flex;
						align-self: flex-end;

						&>.button {
							width: 160rpx;
							height: 60rpx;
							border-radius: 35rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							&:active {
								opacity: 0.7;
							}
						}

						.button:nth-child(1) {
							height: 56rpx;
							border: 1px solid rgba(64, 33, 16, 0.50);
							color: rgba(64, 33, 16, 0.50);
						}

						.button:nth-child(2) {
							margin-left: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
